<template>
	<div class="buycar">
		<div class="Cart">
			
				<router-link to="myinfo"><div style="color:black;">返回</div></router-link>
			<div style="margin-top: 0.5rem;"></div>
			<table border="1" cellspacing="0" cellpadding="0">
				<tr>
					<td>
						<input type="checkbox" v-model="checkAll" @change="check()" />
					</td>
					<td>商品图片</td>
					<td>商品名称</td>
					<td>商品价格</td>
					<td>数量</td>
					<td>总价格</td>
				</tr>
				<tr v-for="(item,i) in homelist">
					<td><input type="checkbox" :value="i" v-model="arr" @change="checkOther()" /></td>
					<td><img :src="`api/public/showimg/${item.book.pic}`" /></td>
					<td>{{item.book.name}}</td>
					<td>￥{{item.price}}</td>
					<td>
						<div class="div1">
							<button @click="adddecrease(i,-1)">
									<i class="el-icon-minus"></i></button>{{item.num}}
								<button@click="adddecrease(i,1)"><i class="el-icon-plus"></i></button>
						</div>
					</td>
					<td>
						{{item.price*item.num}}
					</td>
				</tr>
			</table>
		</div>
		<div class="total">
			<span><div style="margin-right: 15rem;width: 10rem;">总价:{{total.toFixed(2)}}</div></span>
			<button @click="goadd">去下单</button>
		</div>
	</div>
</template>

<script>
	import {
		mapActions,
		mapState
	} from 'vuex';
	export default {
		name: 'MobileShopping',
		data() {
			return {
				homelist: [],
				checkAll: false,
				arr: [],
			}
		},
		created() {
			this.$axios.get("/api/fore/cart/findMyCarts").then((res) => {
				if (res.status == 200) {
					this.homelist = res.data.data
				}
			}).catch((error) => {
				console.log(error);
			})
		},
		methods: {
			...mapActions('shelf', ['BookShelf']),
			adddecrease(i, mun) {
				this.homelist[i].num = this.homelist[i].num + mun
				if (this.homelist[i].num <= 0) {
					this.homelist[i].num = 1
				}
			},
			check() {
				if (this.checkAll) {
					for (let i in this.homelist) {
						this.arr.push(Number(i));
					}
				} else {
					this.arr = [];
				};
				this.arr = Array.from(new Set(this.arr)); //去重
				this.arr.sort((a, b) => {
					return a - b;
				})
			},
			checkOther() {
				this.checkAll = this.arr.length == this.homelist.length ? true : false;
				this.arr.sort((a, b) => {
					return a * b;
				})
			},
			goadd() {
				if(this.arr.length==0){
					this.$message({
						message: '请你选择下单物品',
						type: 'error'
					})
					return;
				}
				let list = [];
				this.arr.forEach((item) => {
					this.BookShelf(
						this.homelist[item]
					)
				})
				this.$router.push({
					path: "order",
				})
			}
		},
		computed: {
			total() {
				let x = 0;
				this.arr.forEach((item, i) => {
					let y = this.homelist[item].num * this.homelist[item].price
					x = x + y
				})
				console.log(x);
				return x;
			}
		}
	}
</script>

<style scoped>
	.buycar .Cart table {
		width: 100%;
	}

	.buycar .Cart tr {
		background-color: #f0d4a0;
		width:100%;
		height: 100%;
		text-align: center;
	}
	.buycar .Cart tr .div1{
		
		display: flex;justify-content: space-between
	}

	.buycar .Cart tr button {
		background-color: initial;
		border: none;
		width: 2rem;
		margin: 0;
		padding: 0;
	}

	.buycar .Cart img {
		width: 50px;
	}

	.buycar .Cart {
		width: 100%;
		height: 60%;
		background-color: #f0d4a0;
	}

	.buycar .total {
		background-color: #a68b5b;
		width: 100%;
		display: flex;
		/* justify-content: flex-end;
		align-items: center; */
		height: 3rem;
	
	}

	.buycar .total span {
		height: 2.5rem;
		line-height: 2.5rem;
		/* width: 100% */
	}

	.buycar .total button {
		margin-left: -60%;
		height: 2.5rem;
		line-height: 2.5rem;
		width: 200px;
		background-color: #fffae8;
		border: none;
	}
</style>